<!DOCTYPE html>
<html lang="zh-CN" nighteye="disabled">
<head>
    <title>视频流监控网站</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./js/layui/css/layui.css">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
    <div id="app" class="main">
        <div class="secondaryContainer">
            <div class="secondaryContainerHeading">
                <h2>直播流选择</h2>
            </div>
            <div class="sideContainer-DPlayer">
                <div id="tree" style="flex:1;margin:2px 0;overflow-y:auto;"></div>
            </div>
        </div>
        <div class="mainContainer">
            <div class="mainContainerTop">
                <div class="switchView" @click="switchShow">
                    <div class="switchIcon">
                        <img src="./imgs/switchVideo.png" /><i data-v-7e601cf8=""
                            class="arrow-icon iconfont-lego icon-angle-down"><img src="./imgs/down.png" /></i>
                    </div>
                    <div class="content-box">
                        <div class="button-group" v-show="switchIconFlag">
                            <div class="button-group__item" @click="videoNumberChange(1)">
                                <img src="./imgs/down1.png" />
                                <div class="button-text">单屏</div>
                            </div>
                            <div class="button-group__item" @click="videoNumberChange(4)">
                                <img src="./imgs/down4.png" />
                                <div class="button-text">四分屏</div>
                            </div>
                            <div class="button-group__item" @click="videoNumberChange(6)">
                                <img src="./imgs/down6.png" />
                                <div class="button-text">六分屏</div>
                            </div>
                            <div class="button-group__item" @click="videoNumberChange(9)">
                                <img src="./imgs/down9.png" />
                                <div class="button-text">九分屏</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="videoCarousel" data-state="0">
                <div class="ui-big-images layui-carousel" style="position:relative">
                    <div v-for="(count,index) in carouselItemNum" :key="index" class="ui-big-image" :data-key="index">
                        <div :class="videosContainerClass">
                            <div class="videoContainer" v-for="(item , index) in videoids" :key="index"
                                v-if="index>=(count-1)*videoShowNum && index<count*videoShowNum">
                                <div class="videoView">
                                    <video :id="item" class="videoComponent" autoplay muted @click="videoPlay(index)"
                                        @dblclick="videoShow(index)" @mouseover="videoShow(index)"
                                        @mouseout="videoHide(index)" poster="./imgs/videoback1.png">
                                        Your browser is too
                                        old which doesn't support HTML5 video.
                                    </video>
                                    <div class="video-control"></div>
                                    <div class="device-name">{{ videoNames[index]}}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button class="layui-carousel-arrow ui-arrow-sub" lay-type="sub" tabindex="-1"
                        @click="send('PREV')">&lt;</button>
                    <button class="layui-carousel-arrow ui-arrow-add" lay-type="add" tabindex="-1"
                        @click="send('NEXT')">&gt;</button>
                </div>

                <div class="ui-thumbnails">
                    <div v-for="(count,index) in carouselItemNum" class="ui-thumbnail" tabindex="-1" :data-key="index"
                        @click="send(index)">
                        <div class="layui-badge layui-bg-gray">{{count}}</div>
                        <div class="ui-cuticle" data-flip-key="cuticle"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script src="./js/layui/layui.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/flv.min.js"></script>
<script src="./js/hls.min.js"></script>
<script src='./js/flipping.web.js'></script>
<script src="./js/live.js"></script>
</body>
</html>